<template>
  <div class="wrapper" id="wrapper">
    <Top title="我的购物车" subTitle="温馨提示：产品是否购买成功，以最终下单为准哦。请尽快结算"></Top>
    <article class="shopping-cart">
      <table class="shopping-cart__table">
        <thead>
          <tr class="thead__tr">
            <th style="width:10%;text-align:left">
              <div
                class="checkbox"
                v-bind:class="{'selected':allSelectd}"
                v-on:click="allToggleOperation"
              ></div>全选
            </th>
            <th style="width:10%"></th>
            <th style="width:30%;text-align:left">商品名称</th>
            <th style="width:10%">单价</th>
            <th style="width:20%">数量</th>
            <th style="width:10%">小计</th>
            <th style="width:10%">操作</th>
          </tr>
        </thead>
        <tbody>
          <template v-for="(goods,index) of list">
            <tr v-bind:key="goods.id" class="tbody_tr">
              <td>
                <div
                  class="checkbox"
                  v-bind:class="{'selected':goods.selected}"
                  v-on:click="toggleOperation($event,index)"
                ></div>
              </td>
              <td style="text-align:center">
                <img v-bind:src="goods.imageUrl" style="width:90px;heigth:90px;margin:10px 0" />
              </td>
              <td style="text-align:left">{{goods.name}}</td>
              <td style="text-align:center">{{goods.price}}元</td>
              <td style="text-align:center">
                <nav class="button-group">
                  <div>
                    <img src="@/assets/reduce.png" class="icon" v-on:click="reduceOperation(index)" />
                  </div>
                  <input type="text" v-bind:value="goods.number" />
                  <div>
                    <img src="@/assets/add.png" class="icon" v-on:click="addOperation(index)" />
                  </div>
                </nav>
              </td>
              <td style="text-align:center">
                <span style="color:#FF6700">{{goods.totalPrice}}元</span>
              </td>
              <td style="text-align:center">
                <img
                  src="@/assets/delete.png"
                  style="width:13px;heigth:13px;cursor:pointer"
                  v-on:click="deleteOperation(index)"
                />
              </td>
            </tr>
            <template v-if="goods.gift.height!=0 && goods.selected">
              <tr v-for="item of goods.gift" v-bind:key="item.id" class="gift-tr">
                <td style="width:10%"></td>
                <td class="gift-td" colspan="6" style="width:50%">
                  <div class="gift-tr__show">
                    <div>
                      <img v-bind:src="item.imageUrl" class="gift-tr__img" />
                    </div>
                    <div style="flex-grow:1.5;margin-left:20px;">
                      <div class="gift-tr__text">赠品</div>
                      <span style="font-size:1.3rem;">{{item.name}}</span>
                    </div>
                    <div style="flex-grow:1.5">{{item.number}}</div>
                  </div>
                </td>
                <td style="width:10%"></td>
              </tr>
            </template>
          </template>
        </tbody>
      </table>
      <nav class="shopping-cart__acount">
        <div style="font-size:1.2rem;text-align:center;width:100px">继续购物</div>
        <div style="margin-right:20px">|</div>
        <div style="flex-grow:1">
          共
          <span style="font-size:1.1rem;color:#FF6700">&nbsp;{{totalNumber}}&nbsp;</span>件商品，已选择
          <span style="font-size:1.1rem;color:#FF6700">&nbsp;{{selectedNumber}}&nbsp;</span>
          件
        </div>
        <div style="width:200px;text-align:right;margin:auto 20px">
          <span style="font-size:1.2rem;color:#FF6700">
            合计：
            <span style="font-size:1.5rem">{{totalPrice}}</span>
            元
          </span>
        </div>
        <div class="button">
          <span style="vertical-align:-12px;" v-on:click="toOrder">去结算</span>
        </div>
      </nav>
    </article>
    <article style="text-align:center;">买购物车中商品的人还买了</article>
  </div>
</template>

<script>
import Top from "@/components/Top.vue";
export default {
  components: {
    Top
  },
  async created() {
    const response = await this.$axios.get("/api/v1/getList");
    this.list = response.data.list;
  },
  methods: {
    toOrder(){
      //转向操作，让router-view标签中的内容重新渲染
      this.$router.push({name:'ConfirmOrder',params:{shoppingCart:this.list,totalPrice:this.totalPrice}});
    },
    async reduceOperation(index) {
      if (this.list[index].number == 1) {
        try {
          await this.$confirm("此操作将删除购物车中的商品, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          });
          this.list.splice(index, 1); //删除操作
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        } catch (err) {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        }
      } else {
        this.list[index].number--;
        this.list[index].totalPrice =
          this.list[index].number * this.list[index].price;
      }
    },
    addOperation(index) {
      this.list[index].number++;
      this.list[index].totalPrice =
        this.list[index].number * this.list[index].price;
    },
    async deleteOperation(index) {
      try {
        await this.$confirm("此操作将删除购物车中的商品, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        });
        this.list.splice(index, 1); //删除操作
        this.$message({
          type: "success",
          message: "删除成功!"
        });
      } catch (err) {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      }
    },
    toggleOperation(event, index) {
      this.list[index].selected = !this.list[index].selected;
    },
    allToggleOperation() {
      this.allSelectd = !this.allSelectd;
      this.list.forEach(goods => {
        goods.selected = this.allSelectd;
      });
    }
  },
  computed: {
    totalPrice() {
      let sum = 0;
      sum = this.list
        .filter(goods => goods.selected)
        .reduce((pre, goods) => pre + goods.number * goods.price, 0);
      return sum;
    },
    totalNumber() {
      return this.list.reduce((pre, goods) => pre + goods.number, 0);
    },
    selectedNumber() {
      return this.list
        .filter(goods => goods.selected)
        .reduce((pre, goods) => pre + goods.number, 0);
    }
  },
  data() {
    return {
      allSelectd: true,
      list: []
    };
  }
};
</script>

<style lang="scss" scoped>
@import "../assets/css/theme.scss";

th {
  font-weight: normal;
  font-size: 1.2rem;
}
.shopping-cart {
  background-color: $background-color;
  .shopping-cart__table {
    margin: 0 auto;
    background-color: white;
    width: $content-width;
    border: 0;
    border-collapse: collapse;
    .thead__tr {
      height: 60px;
    }
    .tbody_tr {
      font-size: 1.3rem;
      border-top: 1px solid $parting-line-color;
    }
    tbody>tr:last-child {
      border-bottom: 0;
    }
    .gift-tr {
      border-bottom: 1px solid $parting-line-color;
      .gift-tr__img {
        width: 70px;
        height: 70px;
        margin: 25px 10px 10px 10px;
      }
      .gift-tr__show {
        margin: 10px;
        background-image: url(../../public/images/gift_background.png);
        background-repeat: no-repeat;
        display: flex;
        flex-direction: row;
        align-items: center;
      }
      .gift-tr__text {
        width: 55px;
        height: 18px;
        background-color: #ff0000;
        color: white;
        text-align: center;
        margin-bottom: 5px;
      }
    }
    .button-group {
      display: flex;
      flex-direction: row;
      width: 140px;
      margin: 0 auto;
      border: 1px solid #ccc;
      input {
        width: 70px;
        border: 0;
        text-align: center;
        height: 35px;
      }
      input:focus {
        outline: 0;
      }
      div {
        height: 38px;
        width: 35px;
      }
      div:hover {
        cursor: pointer;
        background-color: #ccc;
      }
      .icon {
        width: 10px;
        height: 10px;
        vertical-align: -6px;
      }
    }
  }
  .shopping-cart__acount {
    width: $content-width;
    margin: 30px auto 0 auto;
    background-color: white;
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .button {
      font-size: 1.6rem;
      width: 250px;
      text-align: center;
      background-color: #f25807;
      height: 50px;
      color: white;
      cursor: pointer;
    }
  }
}
.checkbox {
  height: 16px;
  width: 16px;
  margin: 0 10px 0 20px;
  vertical-align: -3px;
  border: 1px solid #e0e0e0;
  float: left;
  cursor: pointer;
}
.selected {
  background: url(../assets/checked.png) no-repeat 0 0/16px 16px;
  border: 1px solid white;
}
</style>